($ => {
    "use strict";

    let id = location.search.split("=")[1];

    let data = null;

    $.ajax({
        url: "http://localhost:3000/data/pro.json",
        success: (res) => {
            // console.log(res)
            res = JSON.parse(res)
            data = res;
            let i = 0;
            res.some((val, idx) => {
                i = idx;
                return val.wId === id;
            })

            let imglist = ``;
            for (let j = 0; j < res[i].imglist.length; j++) {
                imglist += `<li>
                                <img src="${res[i].imglist[j]}" alt="">
                            </li>`
            }

            let detailImg = `<div class="box" id="box">
            <div class="small" id="small">
              <img src="${res[i].img}" width="350" alt="" />
              <div class="mask" id="mask"></div>
            </div>
            <div class="big" id="big">
              <img src="${res[i].img}" width="800" alt="" id="img" />
            </div>
        </div>
        <div class="clear-right">
            <h3 class="names">
                ${res[i].name}
            </h3>
            <div class="price">
                <span>价格</span>
                <strong>￥${res[i].price}</strong>
            </div>
            <div class="dll">
                <div class="dll-left">
                    服务
                </div>
                <div class="dll-right">
                <div class="right-top">
                    本产品由OJO眼镜商城提供发货和售后服务
                </div>
                <div class="right-bottom">
                    <li>24h内发货</li>
                    <li>7天内无理由退换货</li>
                    <li>支持到店自取</li>
                </div>
            </div>
            <div class="gouwu">
                <input type="button" value="立即购买">
                <input type="button" value="加入购物车" class="gwcbtn">
            </div>
        </div>
        </div>`;
            $(".clearfix").html(detailImg);


            let boxObj = document.getElementById('box');
            console.log(boxObj);
            let smallObj = document.getElementById('small');
            console.log(smallObj);
            let smallImgObj = smallObj.firstElementChild;
            let maskObj = smallObj.lastElementChild;
            let bigObj = document.getElementById('big');

            let bigImgObj = document.getElementById('img');

            // 2 给small绑定鼠标移入事件
            smallObj.onmouseenter = () => {
                // 2-1 显示mask和大图
                maskObj.style.display = 'block';
                bigObj.style.display = 'block';
            }

            // 3 鼠标移出消失
            smallObj.onmouseleave = () => {
                // 2-1 显示mask和大图
                maskObj.style.display = 'none';
                bigObj.style.display = 'none';
            }

            //4 鼠标移动则让mask跟随
            smallObj.onmousemove = (eve) => {
                // 4-1 获取鼠标的实时位置
                let { pageX, pageY } = eve;
                //   console.log(pageX, pageY);
                // 4-2 获取box的left和top值,计算出鼠标相对于small的坐标

                let tmpX = pageX - boxObj.offsetLeft - maskObj.offsetWidth / 2;
                let tmpY = pageY - boxObj.offsetTop - maskObj.offsetHeight / 2;
                //console.log(boxObj.offsetLeft, boxObj.offsetTop);
                // 4-3 边界的设置
                if (tmpX < 0) tmpX = 0;
                if (tmpY < 0) tmpY = 0;

                // 计算出最大的left和top值
                let maxLeft = smallObj.offsetWidth - maskObj.offsetWidth;
                let maxTop = smallObj.offsetHeight - maskObj.offsetHeight;
                if (tmpX > maxLeft) tmpX = maxLeft;
                if (tmpY > maxTop) tmpY = maxTop;
                // 给mask设置位置
                maskObj.style.left = tmpX + "px";
                maskObj.style.top = tmpY + "px";

                //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
                //  mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
                //img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
                let bigImgMaxLeft = bigImgObj.offsetWidth - bigObj.offsetWidth;
                let bigimgMaxTop = bigImgObj.offsetHeight - bigObj.offsetHeight;

                // 由公式算出 大图的left和top
                let bigLeft = tmpX / maxLeft * bigImgMaxLeft;
                let bigTop = tmpY / maxTop * bigimgMaxTop;

                // 设置给大图
                bigImgObj.style.left = -bigLeft + 'px';
                bigImgObj.style.top = -bigTop + 'px';
            }






            $(".gwcbtn").on("click", function() {
                console.log(2222);
                let proMsg = localStorage.getItem("proMsg") ? JSON.parse(localStorage.getItem("proMsg")) : [];

                let index = 0;
                data.some((val, idx) => {
                    index = idx;
                    return val.wId === id;
                });

                if (proMsg.length >= 1) {
                    let flag = false;
                    let i;
                    for (i = 0; i < proMsg.length; i++) {
                        if (proMsg[i].id === id) {
                            flag = true;
                            break;
                        }
                    }
                    if (flag) {
                        proMsg[i].num++;
                    } else {
                        proMsg.push({
                            id,
                            num: 1,
                            price: res[index].price
                        })
                    }
                } else {
                    proMsg.push({
                        id,
                        num: 1,
                        price: res[index].price
                    })
                }
                if (userMsg.user && userMsg.pass) {
                    localStorage.setItem("proMsg", JSON.stringify(proMsg));
                } else {
                    alert("请先登录再加入购物车");
                    location.href = "dengluzhuce.html"
                }

            })



        }
    })






})(jQuery)